Skip to content

feat(devtools): extract theme to devtool components#366

Open
harry-whorlow wants to merge 2 commits intomainfrom
extract-devtools-theme
Open

feat(devtools): extract theme to devtool components#366
harry-whorlow wants to merge 2 commits intomainfrom
extract-devtools-theme

Conversation

@harry-whorlow
Copy link
Contributor

@harry-whorlow harry-whorlow commented Mar 12, 2026

Moves devtool theme from the utils to the component to avoid the theme miss-match error.

Summary by CodeRabbit

  • New Features

    • Devtools component accepts a configurable theme property.
  • Bug Fixes

    • Improved theme handling to prevent display inconsistencies.
  • New Routes

    • Added /image-gen and /api/image-gen routes to the example app.
  • Chores

    • Updated devtools-related dependency ranges across several packages.

@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Latest commit: 4842956

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@tanstack/ai-devtools-core Patch
@tanstack/preact-ai-devtools Patch
@tanstack/react-ai-devtools Patch
@tanstack/solid-ai-devtools Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@harry-whorlow harry-whorlow marked this pull request as draft March 12, 2026 21:17
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 12, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: eb6fd2f0-4db1-4f81-9d25-cd31d807ca13

📥 Commits

Reviewing files that changed from the base of the PR and between f7e0eaf and 4842956.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (6)
  • examples/ts-react-chat/src/routeTree.gen.ts
  • packages/typescript/ai-devtools/package.json
  • packages/typescript/ai-devtools/src/components/Shell.tsx
  • packages/typescript/preact-ai-devtools/package.json
  • packages/typescript/react-ai-devtools/package.json
  • packages/typescript/solid-ai-devtools/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/typescript/ai-devtools/src/components/Shell.tsx

📝 Walkthrough

Walkthrough

Adds a ThemeContextProvider and theme prop to the Devtools component, restores image-gen routes in the generated route types, and bumps @tanstack/devtools-ui / devtools-utils dependency ranges in several ai-devtools packages.

Changes

Cohort / File(s) Summary
Changeset
.changeset/moody-wings-type.md
New changeset documenting a patch bump for @tanstack/ai-devtools-core and noting that the devtools theme was moved to the component.
Devtools Theme Integration
packages/typescript/ai-devtools/src/components/Shell.tsx
Devtools now accepts DevtoolProps with a theme field; wraps AIProvider / DevtoolsContent in ThemeContextProvider (imported from @tanstack/devtools-ui) and uses TanStackDevtoolsTheme type.
Route types regenerated
examples/ts-react-chat/src/routeTree.gen.ts
Reintroduced ImageGenRoute and ApiImageGenRoute imports and their entries in FileRoutesByPath / FileRoutesByTo so /image-gen and /api/image-gen are represented in generated route typings.
Package dependency bumps
packages/typescript/ai-devtools/package.json, packages/typescript/react-ai-devtools/package.json, packages/typescript/preact-ai-devtools/package.json, packages/typescript/solid-ai-devtools/package.json
Updated dependency ranges: @tanstack/devtools-ui ^0.5.0 → ^0.5.1 (ai-devtools); @tanstack/devtools-utils 0.3.2 → ^0.4.0 across React/Preact/Solid/AI packages.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped in with a tiny cheer,
Wrapped themes in place so all's sincere,
Routes returned, dependencies tuned,
The devtools hum—no mismatched rune.
🥕✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is minimal and lacks the required template sections (🎯 Changes details, ✅ Checklist, and 🚀 Release Impact confirmation), though a changeset file was added. Complete the PR description template by explicitly checking the checklist items and confirming the changeset was generated, or provide more detailed explanation of changes in the 🎯 Changes section.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: moving theme handling from utilities to devtool components to address theme mismatch issues.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch extract-devtools-theme
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Mar 12, 2026

View your CI Pipeline Execution ↗ for commit 4842956

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 4m 5s View ↗
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 1m 31s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-15 11:43:52 UTC

@harry-whorlow
Copy link
Contributor Author

harry-whorlow commented Mar 12, 2026

do note merge till TanStack/devtools#386 is merged, it won't build anyways 😄...

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/moody-wings-type.md:
- Line 5: Replace the typo "miss-match" with the correct single-word "mismatch"
in the changeset text (search for the string "miss-match" in
.changeset/moody-wings-type.md and update it to "mismatch") so the sentence
reads "Moves devtools theme to the component to avoid theme mismatch."

In `@packages/typescript/ai-devtools/src/components/Shell.tsx`:
- Around line 1-6: The named imports from 'solid-js' are not in the order
required by the sort-imports rule; reorder the import specifiers so they are
alphabetically sorted (adjust the placement of ThemeContextProvider among
createSignal, onCleanup and onMount) so the import list in Shell.tsx satisfies
the linter.
- Around line 5-7: The import of ThemeContextProvider from 'solid-js' is
invalid; remove ThemeContextProvider from the solid-js import list and either
import the actual provider from its correct package (e.g., the real source or a
package like `@solid-primitives/context`) or create a local provider using
createContext() and export a ThemeContextProvider wrapper used by the Shell
component; update any usage of ThemeContextProvider in this file to the newly
imported/defined provider so the build no longer fails.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: af840485-8d5a-4699-852f-dc1fb9e8dbfb

📥 Commits

Reviewing files that changed from the base of the PR and between a961381 and f7e0eaf.

📒 Files selected for processing (2)
  • .changeset/moody-wings-type.md
  • packages/typescript/ai-devtools/src/components/Shell.tsx

@harry-whorlow harry-whorlow marked this pull request as ready for review March 15, 2026 11:38
@harry-whorlow harry-whorlow requested a review from a team March 15, 2026 11:38
@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 15, 2026

Open in StackBlitz

@tanstack/ai

npm i https://pkg.pr.new/@tanstack/ai@366

@tanstack/ai-anthropic

npm i https://pkg.pr.new/@tanstack/ai-anthropic@366

@tanstack/ai-client

npm i https://pkg.pr.new/@tanstack/ai-client@366

@tanstack/ai-devtools-core

npm i https://pkg.pr.new/@tanstack/ai-devtools-core@366

@tanstack/ai-elevenlabs

npm i https://pkg.pr.new/@tanstack/ai-elevenlabs@366

@tanstack/ai-event-client

npm i https://pkg.pr.new/@tanstack/ai-event-client@366

@tanstack/ai-fal

npm i https://pkg.pr.new/@tanstack/ai-fal@366

@tanstack/ai-gemini

npm i https://pkg.pr.new/@tanstack/ai-gemini@366

@tanstack/ai-grok

npm i https://pkg.pr.new/@tanstack/ai-grok@366

@tanstack/ai-groq

npm i https://pkg.pr.new/@tanstack/ai-groq@366

@tanstack/ai-ollama

npm i https://pkg.pr.new/@tanstack/ai-ollama@366

@tanstack/ai-openai

npm i https://pkg.pr.new/@tanstack/ai-openai@366

@tanstack/ai-openrouter

npm i https://pkg.pr.new/@tanstack/ai-openrouter@366

@tanstack/ai-preact

npm i https://pkg.pr.new/@tanstack/ai-preact@366

@tanstack/ai-react

npm i https://pkg.pr.new/@tanstack/ai-react@366

@tanstack/ai-react-ui

npm i https://pkg.pr.new/@tanstack/ai-react-ui@366

@tanstack/ai-solid

npm i https://pkg.pr.new/@tanstack/ai-solid@366

@tanstack/ai-solid-ui

npm i https://pkg.pr.new/@tanstack/ai-solid-ui@366

@tanstack/ai-svelte

npm i https://pkg.pr.new/@tanstack/ai-svelte@366

@tanstack/ai-vue

npm i https://pkg.pr.new/@tanstack/ai-vue@366

@tanstack/ai-vue-ui

npm i https://pkg.pr.new/@tanstack/ai-vue-ui@366

@tanstack/preact-ai-devtools

npm i https://pkg.pr.new/@tanstack/preact-ai-devtools@366

@tanstack/react-ai-devtools

npm i https://pkg.pr.new/@tanstack/react-ai-devtools@366

@tanstack/solid-ai-devtools

npm i https://pkg.pr.new/@tanstack/solid-ai-devtools@366

commit: 4842956

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants